<!--
 * @Author: liaoxing
 * @Date: 2022-02-16 16:48:55
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-02-16 18:19:17
 * @Description: liaoxing created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\quote\customerQuote.vue
-->
<template>
  <div class="customerQuote">
    <header class="flex-align-center">
      <el-select style="width: 120px" v-model="keyCode" placeholder="请选择" size="mini">
        <el-option
          v-for="item in keyOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-form :inline="true" :model="searchValue" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-input v-model="searchValue.searchData"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </header>
    <main>
      <el-table
        :header-cell-style="{backgroundColor: '#F2F6FC'}"
        :data="customerList"
        style="width: 100%">

        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          v-for="item in tableRenderList"
          align="center"
          :key="item.key"
          :prop="item.key"
          :label="item.label"
          :width="item.width || 'auto'">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        :page-size="ps"
        layout="total, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </main>
  </div>
</template>

<script>
export default {
  name: "customerQuote",
  data () {
    return {
      keyOptions: [
        {label: "客户编码", value: "code1"},
        {label: "客户名称", value: "code2"},
        {label: "客户简称", value: "code3"},
        {label: "销售员", value: "code4"}
      ],
      keyCode: 'code1',
      searchValue: {
        searchData: ''
      },
      tableRenderList: [
        {label: "客户编码", key: "key1"},
        {label: "客户名称", key: "key2"},
        {label: "客户简称", key: "key3"},
        {label: "客户类别", key: "key4"},
        {label: "审核人", key: "key5"},
        {label: "是否有报价", key: "key6"},
        {label: "审核日期", key: "key7"}
      ],
      customerList: [],
      pn: 1,
      ps: 10,
      totalSize: 0
    }
  }
}
</script>

<style lang="less">
.customerQuote{
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  position: relative;
  background-color: #F3F5FA;
  header{
    height: 50px;
    padding: 0 16px;
    background-color: white;
    .el-form-item--mini.el-form-item{
      margin-bottom: 0;
      margin-left: 16px;
    }
  }
  main{
    margin-top: 16px;
    background-color: white;
    height: calc(100% - 66px);
    box-sizing: border-box;
    padding: 16px;
  }
}
</style>